<template>
  <div>
    <ElLine :title="'事项报告'" style="margin-bottom: 10px"/>
    <el-table :data="data" border style="width: 95%">
      <el-table-column align="center" type="index" width="50"/>
      <el-table-column align="center" prop="reportName" label="报告名称" min-width="15%"/>
      <el-table-column align="center" prop="compile" label="编写人" min-width="5%"/>
      <el-table-column align="center" prop="createTime" label="编写时间" min-width="5%"/>
      <el-table-column align="center" label="操作" min-width="5%">
        <template #default="scope">
          <el-button @click="viewDetails(scope.row)" type="success" plain size="small">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="initData.openWordOpen" width="80%" :min-height="800">
    <el-line title="工作报告" style="margin:10px 0 10px 0"></el-line>
    <div style="margin: 0px 10px 10px 0px; text-align:right">
      <el-button style="width: 80px" type="warning">打印</el-button>
      <el-button style="width: 80px" type="success">下载</el-button>
      <el-button v-show="initData.isAdd" style="width: 80px" type="primary" @click="saveWorkReportM">归档</el-button>
    </div>

      <editor v-show="initData.isAdd" disabled v-model="initData.form.content" :min-height="400"/>
      <!--    <editor v-show="!initData.isAdd" disabled v-model="initData.form.content" :min-height="400"/>-->
  </el-dialog>
</template>

<script>
import {ref, reactive, onMounted} from 'vue';
import {getReports, saveWorkReport} from '@/api/matter/matter.js';

export default {
  name: "eventReport",
  props: {
    rowData: {
      type: Object,
      default: null
    }
  },
  setup(props) {
    const data = ref([]);
    const initData = reactive({
      isAdd: true,
      form: {},
      openWordOpen: false,
    });

    const fetchData = () => {
      getReports({matterId: props.rowData.matterId}).then(res => {
        data.value = res.data;
      });
    };

    const viewDetails = (row) => {
      initData.form = row;
      initData.openWordOpen = true;
    };

    const saveWorkReportM = () => {
      const reportName = document.getElementById('reportName').innerText; // 报告名称
      const content = initData.form.content;
      const matterId = props.rowData.matterId;
      const workReport = {
        reportName,
        content,
        matterId
      };
      saveWorkReport(workReport).then(response => {
        if (response.code === 200) {
          this.$message.success('操作成功');
          fetchData();
          initData.openWordOpen = false;
        }
      });
    };

    onMounted(fetchData);

    return {
      data,
      initData,
      viewDetails,
      saveWorkReportM
    };
  }
};
</script>

<style scoped>
</style>
